<template>
  <div class="ipcontrol">
    <!--局域网集控 -->
    <div class="con">
         <div class="topbtn">
              <span>管理机列表</span>
              <el-button  class="last-el-button" @click="getIpfn" type="primary">查询局域网</el-button>
         </div>
         <div class="mytable">
              <el-table :data="tableData" height="100%" stripe  style="width: 100%;">
                                        <el-table-column type="index"  width="120" label="序号" align="center"> </el-table-column>
                                        <el-table-column  label="IP地址" align="center"> 
                                             <template  #default="{row}">
                                                    <div class="mysort" @click="tolinkfn(row.ipName)">
                                                         {{row.ipName}}
                                                    </div>
                                                </template>
                                        </el-table-column>
               </el-table>
         </div>
         <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
    </div>
  </div>
</template>

<script>
import {ipSendBroadcast,getipdetect} from "../../api/Interface";
export default {

  data() {
    return {
      tableData:[],
      diaisMask:false,
    };
  },

  mounted() {
    this.getIpfn()
  },

  methods: {
    getIpfn(){
      this.diaisMask = true
      ipSendBroadcast().then(res => {
          if(res.code == 200){
               getipdetect().then(data => {
               this.diaisMask = false
               var listData = []
               if(data.code == 200){
                   data.data.ips.forEach(item => {
                      listData.push({
                        ipName:item
                      })
                   })
                   this.tableData = listData
               }
           })
          }else {
             this.diaisMask = false
          }
      })
    },
    //跳转链接
    tolinkfn(row){
        window.open(`http://${row}`, '_blank');
    },
  },
};
</script>
<style lang="scss" scoped>
    .ipcontrol {
         width: 100%;
         height: 100%;
         .con {
             width: 100%;
             height: 100%;
             padding: 12px;
             box-sizing: border-box;
             background-color: #fff;
             position: relative;
            .topbtn {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 border-bottom: 1px solid #ccc;
                 padding-bottom: 12px;
                 margin-bottom: 20px;
                 span {
                     font-size: 16px;
                 }
            }
            .mytable {
                 width: 100%;
                 height: calc(100% - 72px);
                 .mysort {
                     color: #368ed9;
                     cursor: pointer;
                     text-decoration: underline;
                 }
            }
         }
    }
</style>